import React, { Component } from 'react';


import { getAddressNameByCode } from '@/utils/utils';
import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import '@ant-design/compatible/assets/index.css';

const colTitle = {
  lineHeight: '32px',
  height: '32px',
  fontSize: 12,
  color: 'rgba(0,0,0,0.65)',
  border: '1px solid #ADADAD',
};

const colContent = {
  lineHeight: '32px',
  height: '32px',
  fontSize: 12,
  color: 'rgba(0,0,0,0.65)',
  border: '1px solid #ADADAD',
};

interface PrintCountProps extends FormComponentProps {
  lookupList: any;
  detailInfo: any;
  startDate: string;
  endDate: string;
}

// eslint-disable-next-line react/prefer-stateless-function
class PrintCountElem extends Component<PrintCountProps> {
  render() {
    const {
      lookupList,
      detailInfo,
      startDate,
      endDate,
    } = this.props;
    return (
      <div style={{ display: 'none' }}>
        <div className="printView" id="billDetails">
          <table
            style={{
              border: '1px solid #000',
              width: '100%',
              borderCollapse: 'collapse',
              textAlign: 'center',
            }}
          >
            <tbody>
              <tr>
                <td
                  colSpan={10}
                  style={{
                    textAlign: 'center',
                    fontSize: '20px',
                    fontWeight: 'bold',
                    border: '1px solid #ADADAD',
                    borderCollapse: 'collapse',
                    lineHeight: '200%',
                  }}
                >
                  快递数据统计
                </td>
              </tr>
              <tr>
                <td style={colTitle}>商户名称</td>
                <td style={colContent}>{detailInfo.name}</td>
                <td style={colTitle}>商户编号</td>
                <td style={colContent}>{detailInfo.vipCode}</td>
                <td style={colTitle}>地址</td>
                <td colSpan={3} style={colContent}>{
                  getAddressNameByCode({
                    pareaCode: detailInfo.pareaCode,
                    caredCode: detailInfo.careaCode,
                    dareaCode: detailInfo.dareaCode,
                  })
                }
                  {detailInfo.address}
                </td>
                <td style={colTitle}>数量总计(件)</td>
                <td style={colContent}>{lookupList.reduce((a: any, b: any) => a + b.count, 0)}</td>
              </tr>
              <tr>
                <td style={colTitle}>联系人</td>
                <td style={colContent}>{detailInfo.contact}</td>
                <td style={colTitle}>联系电话</td>
                <td style={colContent}>{detailInfo.phone}</td>
                <td style={colTitle}>开始时间</td>
                <td style={colContent}>{startDate}</td>
                <td style={colTitle}>结束时间</td>
                <td style={colContent}>{endDate}</td>
                <td style={colTitle}>合计金额(元)</td>
                <td style={colContent}>
                  {(lookupList.reduce((a: any, b: any) => a + b.money, 0) / 100).toFixed(2)}
                </td>
              </tr>
              <tr>
                <td style={colTitle}>大客户签字</td>
                <td colSpan={3} style={colContent} />
                <td style={colTitle}>近邻宝签字/日期</td>
                <td colSpan={3} style={colContent} />
                <td style={colTitle}>月结金额(元)</td>
                <td style={colContent}>
                  {(lookupList.reduce((a: any, b: any) => a + b.monthMoney, 0) / 100).toFixed(2)}
                </td>
              </tr>
            </tbody>
          </table>
          <table
            style={{
              width: '100%',
              borderCollapse: 'collapse',
            }}
          >
            <tbody>
              <tr>
                <td colSpan={10} style={colTitle}>快递数据统计</td>
              </tr>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                fontSize: 12,
                textAlign: 'center',
              }}
              >
                <td style={{ width: '25%', border: '1px solid #ADADAD' }}>序号</td>
                <td style={{ width: '25%', border: '1px solid #ADADAD' }}>时间</td>
                <td style={{ width: '25%', border: '1px solid #ADADAD' }}>揽件数</td>
                <td style={{ width: '25%', border: '1px solid #ADADAD' }}>揽件金额</td>
              </tr>
              {
                lookupList.map((item: any, index: number) => (
                  <tr
                    key={item.date}
                    style={{
                      lineHeight: '32px',
                      height: '32px',
                      fontSize: 12,
                      textAlign: 'center',
                    }}
                  >
                    <td style={{ width: '25%', border: '1px solid #ADADAD' }}>
                      {index + 1}
                    </td>
                    <td style={{ width: '25%', border: '1px solid #ADADAD' }}>
                      {item.date}
                    </td>
                    <td style={{ width: '25%', border: '1px solid #ADADAD' }}>
                      {item.count}
                    </td>
                    <td style={{ width: '25%', border: '1px solid #ADADAD' }}>
                      {(item.money / 100).toFixed(2)}
                    </td>
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default Form.create<PrintCountProps>()(PrintCountElem);
